<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: none;
            color: #f00;
            margin-left: 10px;
            height: 0px;
        }
    </style>
</head>

<body>
    姓名 <input type="text" class="name"> <span class="number1">请输入3-6位数字或字母</span>
    <br> 年龄
    <input type="text" class="age"> <span class="number2">请输入10-30的年龄</span>
    <br> 身高
    <input type="text" class="height"> <span class="number3">请输入100-200的身高</span>
    <br> 体重
    <input type="text" class="weight"> <span class="number4">请输入100-200的体重</span>
    <br>
    <button class="btn">验证</button>
    <button class="apply">添加</button>
    <table class="tb" border="1" cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>身高</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
    </table>

</body>
<script>
    let usname = document.querySelector(".name")
    let age = document.querySelector(".age")
    let height = document.querySelector(".height")
    let weight = document.querySelector(".weight")
    let btn = document.querySelector(".btn")
    let number1 = document.querySelector(".number1")
    let number2 = document.querySelector(".number2")
    let number3 = document.querySelector(".number3")
    let number4 = document.querySelector(".number4")

    btn.addEventListener("click", function() {
        if (usname.value.length < 3 || usname.value.length > 6) {
            return number1.style.display = "block"
        }
        if (age.value < 10 || age.value > 30) {
            return number2.style.display = "block"
        }
        if (height.value < 100 || height.value > 200) {
            return number3.style.display = "block"
        }
        if (weight.value < 100 || weight.value > 200) {
            return number4.style.display = "block"
        }
    })

    let tb = document.querySelector(".tb")
    let apply = document.querySelector(".apply")
    apply.addEventListener("click", function() {

        let tr = document.createElement("tr")
        tr.innerHTML = `
        <tr>
            <th>${usname.value}</th>
            <th>${age.value}</th>
            <th>${height.value}</th>
            <th>${weight.value}</th>
            <th class="delete">删除</th>
        </tr>
    `
        tb.appendChild(tr)

    })

    let deletes = document.querySelectorAll('.delete')
    deletes.forEach(function(item, i) {
        item.addEventListener('click', function() {})
    })
    tb.addEventListener('click', function(e) {
        if (e.target.classList.contains('delete')) {
            e.target.parentNode.remove()
        }
    })
</script>

</html>